$(function() {
    //定义一个查询参数对象，
    const data = {
        pagenum: 1, //页码值为1,默认请求第一页的数据
        pagesize: 2, //每页显示几条数据,默认值为2
        cate_id: '', //文章分类id
        state: '' //文章的状态
    };

    //封装请求文章列表的ajax请求
    function Ajax(url, data) {
        $.ajax({
            type: 'GET',
            url: url,
            data: data,
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }
                layui.layer.msg(res.message);

                let htmlStr = template('tpl-table', {
                    data: res.data
                });
                $('tbody').empty();
                $('tbody').html(htmlStr);

                //请求图片用于展示
                let imgs = document.querySelectorAll('#img');
                let url = null;
                Object.defineProperty(Image.prototype, 'authsrc', {
                    writable: true,
                    enumerable: true,
                    configurable: true
                });
                for (let i = 0; i < imgs.length; i++) {
                    url = imgs[i].getAttribute('authsrc');
                    //动态请求 需要鉴权的图片资源写法
                    const xhr = new XMLHttpRequest();
                    xhr.responseType = 'blob'; //设置响应类型为二进制数据 这里必须要写*****
                    xhr.open('get', 'http://127.0.0.1:3007' + url, true);
                    xhr.setRequestHeader("Authorization", localStorage.getItem('token')); //设置请求头，用于鉴权
                    xhr.send();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4) { //获得服务器发来的全部信息
                            if (xhr.status >= 200 && xhr.status < 300) { //状态成功就处理图片显示
                                imgs[i].src = URL.createObjectURL(xhr.response);
                                imgs[i].addEventListener('load', function() {
                                    URL.revokeObjectURL(imgs[i].src);
                                });
                            }
                        }
                    }
                }

                //渲染分页
                renderPage(res.total);
            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });
    }

    //处理参数不同请求文章列表
    function getArticles(cate_id, state) {
        if (cate_id == '' && state == '') {
            initTable();
        } else if (cate_id == '' && state != '') {
            Ajax('/my/article/list', {
                pagenum: data.pagenum,
                pagesize: data.pagesize,
                state: state
            });
        } else if (cate_id != '' && state == '') {
            Ajax(`/my/article/${cate_id}/list_cate`, {
                pagenum: data.pagenum,
                pagesize: data.pagesize,
            });
        } else {
            Ajax(`/my/article/${cate_id}/list`, {
                pagenum: data.pagenum,
                pagesize: data.pagesize,
                state: state
            });
        }
    }

    //定义美化时间的过滤器
    template.defaults.imports.dataFormat = function(data) {
        const dt = new Date(data);
        const y = PadZore(dt.getFullYear());
        const m = PadZore(dt.getMonth() + 1);
        const d = PadZore(dt.getDate());

        const hh = PadZore(dt.getHours());
        const mm = PadZore(dt.getMinutes());
        const ss = PadZore(dt.getSeconds());

        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
    }

    function PadZore(n) {
        return n > 9 ? n : '0' + n;
    }

    //初始化文章分类
    function initCate() {
        $.ajax({
            type: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }

                layui.layer.msg(res.message);
                let htmlStr = template('tpl-cate', res);
                $('[name="cate_id"]').html(htmlStr);
                layui.form.render(); //通知layui重新渲染动态生成的select
            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });
    }

    initCate();

    //获取文章列表数据的方法
    function initTable() {
        Ajax('/my/article/list_pages', {
            pagenum: data.pagenum,
            pagesize: data.pagesize
        });
    }

    initTable();

    //筛选事件
    $('#form-search').on('submit', function(e) {
        e.preventDefault();
        // 获取表单中选中的值
        const cate_id = $('[name="cate_id"]').val();
        const state = $('[name="state"]').val();

        data.cate_id = cate_id;
        data.state = state;
        data.pagenum = 1;
        data.pagesize = 2;

        getArticles(cate_id, state);
    });

    //定义渲染分页的方法
    function renderPage(total) {
        //调用layui.laypage.render() 来渲染分页
        layui.laypage.render({
            elem: 'pageBox', //分页容器id
            count: total, //数据总条数
            limit: data.pagesize, //每页显示几条数据
            curr: data.pagenum, //默认选中的分页
            limits: [1, 2, 3, 5, 10],
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            //分页切换时触发回调 jump
            //触发jump回调的方式有两种
            //1.点击页码的时候，会触发jump回调  first = undefined
            //2.只要调用laypage.render() 方法，就会触发jump回调  first = true
            jump: function(obj, first) {
                //最新的页码值赋值给data
                data.pagenum = obj.curr;
                data.pagesize = obj.limit;
                //通过first值来判断是那种方式触发jump回调
                if (!first) {
                    getArticles(data.cate_id, data.state);
                }
            }
        });
    }

    //通过代理形式，为删除事件添加点击事件
    $('tbody').on('click', '.btn-delete', function() {
        //获得当前页面的文章的删除按钮个数
        let len = $('.btn-delete').length; //获取当前对象的个数
        let id = $(this).attr('data-id');
        layui.layer.confirm('确认删除?', {
            icon: 3,
            title: '提示'
        }, function(index) {
            $.ajax({
                type: 'GET',
                url: `/my/article/delete/${id}`,
                success: function(res) {
                    if (res.status !== 0) {
                        return layui.layer.msg(res.message);
                    }
                    layui.layer.msg(res.message);
                    layui.layer.close(index);
                    //如果此页面只剩一条数据，被删了，此页面没了，所以要让页码值 - 1
                    if (len === 1) {
                        //页码值最小是1
                        data.pagenum = data.pagenum === 1 ? 1 : data.pagenum - 1;
                        if (data.pagenum === 1) {
                            let htmlStr = template('tpl-table', {
                                data: []
                            });
                            $('tbody').empty();
                            $('tbody').html(htmlStr);
                            return layui.layer.msg(res.message);
                        }
                    }
                    //重新渲染文章列表
                    getArticles(data.cate_id, data.state);
                },
                timeout: 3000,
                error: function() {
                    return layui.layer.msg('出错啦');
                }
            });
        });
    });

    //修改文章
    let indexEdit = null; //记录修改文章层

    //事件委托
    $('tbody').on('click', '.btn-edit', function() {
        //弹出一个修改文章的层
        indexEdit = layui.layer.open({
            type: 1,
            area: ['1300px', '600px'],
            title: '修改文章',
            content: $('#dialog-edit').html()
        });

        //初始化文章分类
        $.ajax({
            type: 'GET',
            url: '/my/article/cates',
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }

                layui.layer.msg(res.message);
                let htmlStr = template('tpl-cate', res);
                $('#cateId').html(htmlStr);
                layui.form.render(); //通知layui重新渲染动态生成的select
            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });

        let id = $(this).attr('data-id');
        //发起文章请求
        $.ajax({
            type: 'GET',
            url: `/my/article/${id}`,
            success: function(res) {
                if (res.status !== 0) {
                    return layui.layer.msg(res.message);
                }
                layui.layer.msg(res.message);

                //请求图片
                let img = document.querySelector('#image');
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'blob'; //设置响应类型为二进制数据 这里必须要写*****
                xhr.open('get', 'http://127.0.0.1:3007' + res.data.cover_img, true);
                xhr.setRequestHeader("Authorization", localStorage.getItem('token')); //设置请求头，用于鉴权
                xhr.send();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) { //获得服务器发来的全部信息
                        if (xhr.status >= 200 && xhr.status < 300) { //状态成功就处理图片显示
                            img.src = URL.createObjectURL(xhr.response);

                            //渲染表单
                            $('#_id').val(res.data._id);
                            $('[name="content"]').val(res.data.content);
                            $(`#cateId option[value="${res.data.cate_id}"]`).prop('selected', true);
                            $('[name="title"]').val(res.data.title);

                            //初始化富文本编辑器
                            initEditor();

                            // 初始化图片裁剪器
                            let $image = $('#image');
                            let options = {
                                aspectRatio: 1,
                                preview: '.img-preview'
                            };
                            $image.cropper(options);

                            layui.form.render(); //通知layui重新渲染动态生成的元素

                            //选择图片文件
                            $('body').on('click', '#btnChooseImage', function() {
                                $('#coverFile').click();
                            });

                            //获取上传文件
                            $('body').on('change', '#coverFile', function(e) {
                                let fileList = e.target.files;
                                if (fileList.length === 0) {
                                    return layui.layer.msg('请选择图片');
                                }

                                let file = e.target.files[0];
                                let newImgURL = URL.createObjectURL(file);
                                $image
                                    .cropper('destroy') // 销毁旧的裁剪区域
                                    .attr('src', newImgURL) // 重新设置图片路径
                                    .cropper(options); // 重新初始化裁剪区域
                            });

                            //定义文章的发布状态
                            let state = '已发布';

                            $('body').on('click', '#btnSave2', function() {
                                state = '草稿';
                            });

                            //发起修改文章请求
                            $('body').on('submit', '#form-edit', function(e) {
                                e.preventDefault();
                                //基于form表单，快速创建一个formdata对象
                                const fd = new FormData($(this)[0]); //$(this)[0] 转为原生DOM对象 FormData用于上传二进制文件

                                //用于向表单追加数据
                                fd.append('state', state);

                                //将裁剪区域的图片输出为二进制图片文件
                                $image
                                    .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                                        width: 280,
                                        height: 280
                                    })
                                    .toBlob(function(blob) { // 将 Canvas 画布上的内容，转化为文件对象
                                        // 得到文件对象后，进行后续的操作
                                        fd.append('cover_img', blob);
                                        //发送ajax
                                        publishArticle(fd);
                                    });
                            });

                            //发布文章
                            function publishArticle(fd) {
                                $.ajax({
                                    type: 'POST',
                                    url: '/my/article/edit',
                                    data: fd,
                                    //向服务器提交formdata数据，要想ajax配置两个必要项
                                    contentType: false, //防治jquery对其进行编码操作，使文件无法被服务器识别
                                    processData: false, //防治其被转化为对象
                                    success: function(res) {
                                        if (res.status !== 0) {
                                            return layui.layer.msg(res.message);
                                        }

                                        layui.layer.msg(res.message);
                                        //根据索引关闭弹出层
                                        layui.layer.close(indexEdit);
                                        getArticles(data.cate_id, data.state);
                                    },
                                    timeout: 3000,
                                    error: function() {
                                        return layui.layer.msg('出错啦');
                                    }
                                });
                            }
                        }
                    }
                }

            },
            timeout: 3000,
            error: function() {
                return layui.layer.msg('出错啦');
            }
        });
    });
});